<template>
	<view class="content">
		<view class="head">
			<view v-for="(item,index) in title" :key="index" :class="[index==active?'active_':'active']" @tap="choice(index)">
				{{item.name}}
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="order_item" v-for="(item,index) in orderList" :key="index" @tap="goDetail(item.id)">
				<view class="order_item_1">
					<view class="order_text_1">
						订单编号:{{item.orderNo}}
					</view>
					<view class="order_text_2">
						{{item.statusMsg}}
					</view>
				</view>
				<view class="order_item_2">
					<view v-for="(item2,index2) in item.orderItemVos" :key="index2" :class="[index2!=0?'margin':'']">
						<image :src="item2.image" class="order_item_img"></image>
						<view class="order_item_4">
							<view class="order_item_3">
								<view class="order_text_3">{{item2.productName}}</view>
								<view class="order_text_4">¥ {{item2.price}}</view>
							</view>
							<view class="order_item_6">
								<view class="order_item_5">
									<view class="order_text_5">{{item2.skuName}}</view>

								</view>
								<view class="order_item_text_6">x {{item2.count}}</view>
							</view>

						</view>
					</view>
				</view>
				<view class="order_item_7">
					<view class="order_item_7_text_1">
						共计{{item.count}}件商品 实付: ¥
					</view>
					<view class="order_item_7_text_2">
						{{item.actualAmount}}
					</view>
				</view>
				<view class="order_item_8" v-if="item.status==0||item.status==7">
					<view class="bt_groy center" @tap.stop="openCancelOrderView(item.id)">取消订单</view>
					<view class="bt_red center">立即支付</view>
				</view>
				<view class="order_item_8" v-if="item.status==1" style="position: relative;">
					<view class="bt_groy center" @tap.stop="remind()">提醒发货</view>
				</view>
				<view class="order_item_8" v-if="item.status==2">
					<view class="bt_groy center" @tap.stop="goCourier(item.id)">查看物流</view>
					<view class="bt_red center" @tap.stop="receive(item.id)">确认收货</view>
				</view>
				<view class="order_item_8" v-if="item.status==3">
					<view class="bt_groy center" @tap.stop="goCourier(item.id)">查看物流</view>
					<view class="bt_red center" @tap.stop="goComment(item.id)">评价</view>
				</view>
				<view class="order_item_8" v-if="item.status==4">
					<view class="bt_groy center" @tap.stop="deleteOrder(item.id)">删除订单</view>
					<view class="bt_red center" @tap.stop="queryComment(item.id)">查看评价</view>
				</view>
				<view class="order_item_8" v-if="item.status==6">
					<text class="bt_groy center" @tap.stop="deleteOrder(item.id)">删除订单</text>
				</view>
			</view>
			<view style="width: 100%;height: 100%;justify-content: center;align-items: center;flex-direction: column;" v-if="orderList.length==0">
				<image src="../../static/icon/order.png" style="width: 80upx;height: 80upx;"></image>
				<view style="margin-top: 10upx;color: #333333;">没有该订单记录</view>
			</view>
		</scroll-view>

		<!-- 取消弹框 -->
		<view class="mask" v-show="cancelVisible" @tap="cancelVisible=false"></view>
		<view :class="[cancelVisible?'frame_':'frame']">
			<view class="frame_del_view">
				<uni-icon @tap="cancelVisible=false" class="frame_del" type="closeempty" size="40" color="#555555"></uni-icon>
			</view>
			<view class="frame_title">取消订单</view>
			<view style="margin: 20upx 0;color: #888888;">请选择取消订单的原因(必选)</view>
			<scroll-view scroll-y style="width: 100%;height: 500upx;">
				<radio-group @change="getCancelIndex">
					<view class="cancel_item" v-for="(item,index) in cancel" :key="index">
						<radio :value="index" style="transform:scale(0.7)" color="#FE0036"></radio>
						<view style="color: #333333;">{{item}}</view>
					</view>
				</radio-group>
			</scroll-view>

			<view style="flex: 1;align-items: center;justify-content: center;">
				<view class="cancel_bt center" @tap="cancelVisible=false">暂不取消</view>
				<view class="sure_bt center" @tap="cancelOrder()">确定取消</view>
			</view>


		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js';
	import {
		getWithParam_
	} from '../../common/request.js';
	import uniIcon from '../../components/uni-icon.vue';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				cancelIndex: null,
				cancelOrderId: null,
				cancelVisible: false,
				orderList: [],
				cancel: ["地址信息错误", "忘记使用优惠券", "商品买错了", "重复下单/误下单", "拍多/不想买了", "其他原因"],
				title: [{
						type: null,
						name: "全部"
					},
					{
						type: 0,
						name: "待付款"
					},
					{
						type: 1,
						name: "待发货"
					},
					{
						type: 2,
						name: "已发货 "
					},
					{
						type: 3,
						name: "评价"
					},
				],
				active: 0,
				index: 1,
				pageSize: 10,
				loadMore: true
			}
		},
		onLoad(option) {
			if (option.type != 'null') {
				this.active = this.getIndex(option.type)
			} else {
				this.active = 0
			}

			this.getOrder()
		},
		onReachBottom() {
			if (this.loadMore) {
				this.index = this.index + 1
				this.getOrder()
			}
		},
		methods: {
			queryComment(id) {
				uni.navigateTo({
					url: "./commentDetail?orderId=" + id
				})
			},
			goComment(id) {
				uni.navigateTo({
					url: "./comment?id=" + id
				})
			},

			receive(id) {
				var that = this
				uni.showModal({
					title: '',
					content: '是否确认收货',
					success: function(res) {
						if (res.confirm) {
							getWithParam_(api.ORDER_RECEIVE, {
								orderId: id
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "操作成功",
								})
								that.index = 1
								that.orderList = []
								that.loadMore = true
								that.getOrder()
							})
						}
					}
				});
			},
			deleteOrder(id) {
				var that = this
				uni.showModal({
					title: '',
					content: '是否删除订单',
					success: function(res) {
						if (res.confirm) {
							getWithParam_(api.ORDER_DELETE, {
								orderId: id
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "删除成功",
								})
								that.index = 1
								that.orderList = []
								that.loadMore = true
								that.getOrder()
							})
						}
					}
				});
			},
			cancelOrder() {
				var orderId = this.cancelOrderId
				if (this.cancelIndex == null) {
					uni.showToast({
						icon: "none",
						title: "请选择原因",
					})
					return
				}
				var reason = this.cancel[this.cancelIndex]
				getWithParam_(api.ORDER_CANCEL, {
					orderId: orderId,
					reason: reason
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: "取消成功",
					})
					this.cancelVisible = false
					this.index = 1
					this.orderList = []
					this.loadMore = true
					this.getOrder()
				})
			},
			getCancelIndex(e) {
				this.cancelIndex = e.detail.value
			},
			openCancelOrderView(id) {
				this.cancelOrderId = id
				this.cancelVisible = true
			},
			goCourier(id) {
				uni.navigateTo({
					url: "./courier?id=" + id
				})
			},
			remind() {
				uni.showToast({
					icon: "none",
					title: "提醒成功"
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: "./detail?id=" + id
				})
			},
			getIndex(type) {
				for (var i = 0; i < this.title.length; i++) {
					if (this.title[i].type == type) {
						return i
					}
				}
			},
			choice(index) {
				this.active = index
				this.orderList = []
				this.getOrder()
			},
			getOrder() {
				let p = {}
				p.index = this.index
				p.pageSize = this.pageSize
				if (this.title[this.active].type != null) {
					p.type = this.title[this.active].type
				}
				getWithParam_(api.ORDER_LIST, p).then(res => {
					if (res.data != null) {
						this.orderList = res.data
						if (res.data.length < 10) {
							this.loadMore = false
						} else {
							this.loadMore = true
						}
					} else {
						this.orderList = []
					}

				})
			}
		}
	}
</script>

<style>
	.cancel_item {
		height: 80upx;
		border-bottom: 3upx solid #F2F3F5;
		align-items: center;
	}

	.margin {
		margin-top: 30upx;
	}

	.bt_red {
		font-weight: 600;
		color: #FE0036;
		border: 1px solid #FE0036;
		border-radius: 60upx;
		margin-right: 30upx;
		width: 140upx;
		height: 60upx;

	}

	.bt_groy {
		font-weight: 600;
		color: #555555;
		border: 1px solid #555555;
		border-radius: 60upx;
		margin-right: 30upx;
		width: 140upx;
		height: 60upx;

	}

	.order_item_8 {
		justify-content: flex-end;
		margin-top: 40upx;
	}

	.margin {
		margin-top: 30upx;
	}

	.order_item_7_text_2 {
		margin-left: 10upx;
		color: #FE0036;
		font-weight: 600;
		font-size: 32upx;
		align-items: flex-end;
	}

	.order_item_7_text_1 {
		color: #333333;
	}

	.order_item_7 {
		justify-content: flex-end;
		margin-top: 30upx;
		align-items: flex-end;
		padding-right: 40upx;
		box-sizing: border-box;
		align-items: flex-end;
	}

	.order_item_text_6 {
		color: #555555;
	}

	.order_item_6 {
		justify-content: space-between;
		margin-top: 20upx;
	}

	.order_item_5 {
		width: 350upx;
		align-items: center;
	}


	.order_text_5 {
		color: #888888;
		max-width: 300upx;
		font-size: 24upx;
		box-sizing: border-box;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order_item_4 {
		flex: 1;
		flex-direction: column;
		margin-left: 30upx;
		margin-top: 10upx;
	}

	.order_text_4 {
		color: #333333;
		font-size: 32upx;
	}

	.order_text_3 {
		width: 350upx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #555555;
	}

	.order_item_3 {
		justify-content: space-between;
	}

	.order_item_img {
		width: 150upx;
		height: 150upx;
	}

	.order_item_2 {
		flex-direction: column;
		padding: 30upx 20upx;
		box-sizing: border-box;
		border-bottom: 1px solid #F2F3F5;
	}

	.order_text_2 {
		color: #FE0036;
	}

	.order_text_1 {
		color: #555555;
	}

	.order_item_1 {
		justify-content: space-between;
		padding: 20upx 0;
		border-bottom: 1px solid #F2F3F5;
	}

	.order_item {
		width: 95%;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 0 20upx 30upx 20upx;
		box-sizing: border-box;
		margin: 20upx auto;
		border-radius: 20upx;
	}

	.scroll_view {
		width: 100%;
		height: calc(100vh - 100upx);
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: 30upx;
	}

	.active {
		flex: 1;
		color: #555555;
		justify-content: center;
	}

	.active_ {
		flex: 1;
		color: #FE0036;
		font-size: 32upx;
		justify-content: center;
	}

	.head {
		width: 100%;
		height: 100upx;
		align-items: center;
		background-color: #FFFFFF;
	}
</style>
